<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
  <title>订单管理系统</title>
  <style>
  *{padding: 0;margin: 0;    font-family: cursive;}
				.mian{
					width:100%;
					margin: 0 auto;
					  
					}
					label {
   					 font-size: 23px;
   					}
					button {
					
					
                   background-color: #333;
  					color: #fff;
    				padding: 30px 30px;
    				border: none;
    				border-radius: 20px;
    				cursor: pointer;
    				font-size: 15px;
					}
				html{
					background-color:darkgray;
					}
				.top{
					height: 70px;
					min-width: 1466px;
					font-size: 50px;
					background-color: #484848;
					}
				.top a{text-decoration:none;
					color: #ffffff;
					padding:20px 0;
				
					}
				.top1{
					height: 70px;
					width: 100px;
					font-family: '仿宋';
					float: left;
					display:inline-block;
					margin-left: 10px;
					font-size: 35px;
					font-weight: bold;
					margin-left: 30px;
					margin-left: auto;  
					margin-right: auto; 
					
					}
				.top2{
					height: 70px;
					width: 100px;
					font-family: '仿宋';
					float: right;
					display:inline-block;
					font-size: 34px;
					font-weight: bold;
					margin-left: auto;  
					margin-right: auto; 
				    display: flex;  justify-content: center;  align-items: center;
				    }
    table {
      border-collapse: collapse;
      font-size: 26px;
    font-family: cursive;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
    h1 {
    font-family: cursive;
    color: tomato;
    font-size:60px;
}
    h2 {
    font-family: cursive;
    color: tomato;
    font-size:40px;
}


  </style>
</head>

<body>
<div class="nav_top">
    <div class="top main">
   			<div class="top1"><a href="#"><img src="../images/tb.jpg" alt=""></a></div>
			<div class="top2"><a href="../productcontrol/index1.html">商品</a></div>
			<div class="top2"><a href="../ordermanagement/orderindex.html">订单</a></div>
			<div class="top2"><a href="../inventoryindex/inventoryindex.html">库存</a></div>
			<div class="top2"><a href="../finance/finance1.html">财务<a></div>
			<div class="top2"><a href="../set/setindex.html">设置</a></div>
			<div class="top2"><a href="../Liang/index.html">用户</a></div>
		</div>
</div>
  <h1>订单管理系统</h1>
  

  <h2>订单列表</h2>
  <table>
    <tr>
      <th>订单编号</th>
      <th>客户名称</th>
      <th>金额</th>
      <th>下单时间</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>100</td>
      <td>2023-12-09</td>
      <td>
        <button onclick="editOrder(1)">编辑</button>
        <button onclick="deleteOrder(1)">删除</button>
      </td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>200</td>
      <td>2023-12-08</td>
      <td>
        <button onclick="editOrder(2)">编辑</button>
        <button onclick="deleteOrder(2)">删除</button>
      </td>
    </tr>
    <tr>
      <td>003</td>
      <td>王五</td>
      <td>300</td>
      <td>2023-12-07</td>
      <td>
        <button onclick="editOrder(3)">编辑</button>
        <button onclick="deleteOrder(3)">删除</button>
      </td>
    </tr>
  </table>

  <h2>订单查询</h2>
  <label for="orderId">订单编号:</label>
  <input type="text" id="orderId">
  <button onclick="searchOrder()">查询</button>

  <h2>新增订单</h2>
  <label for="newOrderId">订单编号:</label>
  <input type="text" id="newOrderId"><br>
  <label for="customerName">客户名称:</label>
  <input type="text" id="customerName"><br>
  <label for="amount">金额:</label>
  <input type="text" id="amount"><br>
  <label for="orderDate">下单时间:</label>
  <input type="text" id="orderDate"><br>
  <button onclick="addOrder()">保存</button>

  <script>
    function editOrder(orderId) {
      // 根据订单编号执行编辑操作，可以跳转到编辑页面或弹窗编辑框
      console.log("编辑订单: " + orderId);
    }

    function deleteOrder(orderId) {
      // 根据订单编号执行删除操作，可以弹出确认对话框
      console.log("删除订单: " + orderId);
    }

    function searchOrder() {
      // 根据查询条件执行订单查询操作
      var orderId = document.getElementById("orderId").value;
      console.log("查询订单: " + orderId);
    }

    function addOrder() {
      // 获取新增订单的表单数据
      var newOrderId = document.getElementById("newOrderId").value;
      var customerName = document.getElementById("customerName").value;
      var amount = document.getElementById("amount").value;
      var orderDate = document.getElementById("orderDate").value;

      // 执行新增订单操作
      console.log("新增订单:");
      console.log("订单编号: " + newOrderId);
      console.log("客户名称: " + customerName);
      console.log("金额: " + amount);
      console.log("下单时间: " + orderDate);
    }
  </script>
</body>
</html>